<?php $this->headLink()->appendStylesheet($this->baseUrl() . '/css/jquery-ui.css') ?>
<?php $this->headScript()->appendFile($this->baseUrl() . '/scripts/jquery-ui.js') ?>

<script type="text/javascript">

    function changeName()
    {
        var name = prompt('New name', $('#playlist-name').text());

        if (name)
        {
            $('#playlist-edit-name').html('<span><\/span>' + name);
            $.post("<?= $this->url(array('controller' => 'playlist', 'action' => 'edit-playlist', 'id' => $this->playlist_id), 'default', true) ?>?name=" + name);
        }
    }

    function updateSourceTop( request, response )
    {
        $.get("<?= $this->baseUrl() ?>/playlist/search?q=" + $("#track_name_top").val() +"&jsonCallback=?",
        function(data, textStatus){
            // just prompt the response and the status message



            response( $.map( data, function( item ) {
                return {
                    label: item.ArtistName + " - " + item.SongName,
                    value: item.SongID
                }
            }));
        }
    );
    }


    function updateSourceBottom( request, response )
    {
        $.get("<?= $this->baseUrl() ?>/playlist/search?q=" + $("#track_name_bottom").val() +"&jsonCallback=?",
        function(data, textStatus){
            // just prompt the response and the status message


            response( $.map( data, function( item ) {
                return {
                    label: item.ArtistName + " - " + item.SongName,
                    value: item.SongID
                }
            }));
        }
    );
    }

    $(function() {
        function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

        $("#track_name_top").autocomplete({
            source: updateSourceTop,

            minLength: 2,
            select: function( event, ui ) {



                $("#tracks").prepend('<li id="song_' + ui.item.value + '"><a href="javascript:void(0)" onclick="play(' + ui.item.value + ')">Play<\/a> ' + ui.item.label +  '  <a style="float: right" href="javascript:void(0)" onclick="$(this).parent().remove();updateTracks();">Remove<\/a><\/li>');

                updateTracks();

                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);

            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });


        $("#track_name_bottom").autocomplete({
            source: updateSourceBottom
            ,
            minLength: 2,
            select: function( event, ui ) {



                $("#tracks").append('<li id="song_' + ui.item.value + '"><a href="javascript:void(0)" onclick="play(' + ui.item.value + ')">Play<\/a> ' + ui.item.label +  '  <a style="float: right" href="javascript:void(0)" onclick="$(this).parent().remove();updateTracks();">Remove<\/a><\/li>');

                updateTracks();

                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });


    function updateTracks() {

        $("#status").html('<img src="<?= $this->baseUrl() ?>/images/loading-mini.gif" alt="">');

        var url = "";

        $('#tracks li').each(function(index, ele) {

            url += "songs[]=" + ele.id.toString().substring(5) + "&";
        });

        var order = url + 'action=updateSongs';
        $.post("<?= $this->url(array('controller' => 'playlist', 'action' => 'update-playlist', 'id' => $this->playlist_id), 'default', true) ?>", order, function(theResponse){
            //$("#contentRight").html(theResponse);

            $("#status").html('<img src="<?= $this->baseUrl() ?>/images/success.png" alt="" align="middle"> <span style="color: lime">Playlist saved<\/span>');
            setTimeout('clearStatus()',3000);
        });
    }


    $(document).ready(function(){

        $(function() {
            $("#tracks").sortable({ opacity: 0.6, cursor: 'move', update: updateTracks
            });
        });




    });

    function clearStatus()
    {
        $("#status").html("");
    }

    function play(songID)
    {
        $('#track').load('<?php echo $this->url(array('controller' => 'playlist', 'action' => 'play-song', 'id' => null)) ?>?id=' + songID);
    }

</script>



<h1 id="playlist-name"><span></span><?= $this->escape($this->info['name']) ?></h1>
<div class="center">

    <a href="javascript:void(0)" onclick="changeName()"><?= $this->translate('rename playlist') ?></a>


<br />
<br />


<div id="status" style="height: 40px; padding: 10px">

</div>


<div id="track" style="padding: 10px">

</div>


<a href="<?= $this->url(array('action' => 'play')) ?>" class="play">
    Play playlist
</a>

<br />
<br />

<div class="demo">

    <div class="ui-widget">
        <label for="track_name_top">Prepend new track: </label>
        <input id="track_name_top" type="text" />
    </div>
</div>

<div id="contentWrap">

    <div id="playlist-edit">
        <ul id="tracks">
            <?php foreach ($this->tracks as $track): ?>

                <li id="song_<?= $track['id'] ?>">
                    <a href="javascript:void(0)" onclick="play(<?= $track['id'] ?>)">Play</a>

                <?= $this->escape($track['artist_name']) ?> - <?= $this->escape($track['song']) ?>  <a style="float: right" href="javascript:void(0)" onclick="$(this).parent().remove();updateTracks();">Remove</a> </li>

            <?php endforeach ?>

            </ul>
        </div>

    </div>


    <div class="demo">

        <div class="ui-widget">
            <label for="track_name_bottom">Append new track: </label>
            <input id="track_name_bottom" type="text" />
        </div>
    </div>



<br />

    <a href="<?= $this->url(array('action' => 'play')) ?>" class="play">
    Play playlist
</a>

<br />

<div style="height: 250px">&nbsp;</div>







<div id="log" style="height: 200px; width: 300px; overflow: auto; display: none;" class="ui-widget-content"></div>
</div>